<template>
  <div class="page">
    <el-pagination
      background
      :total="total"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :current-page="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="currentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["total", "employee"],
  data() {
    return {
      // // 总数据
      // total: this.$parent.employee.length,
      // // 每页有几条数据
      pageSize: 4,
      pageSizes: [4, 8, 12, 16],
      // 当前页
      currentPage: 1,
      tableData: [],
    };
  },
  computed: {
    newEmployee() {
      return this.employee;
    },
  },
  methods: {
    // 分页功能的操作
    currentChange(currentPage) {
      this.currentPage = currentPage;
      // this.tableData = this.newEmployee.slice(
      //   (currentPage - 1) * this.pageSize,
      //   currentPage * this.pageSize
      // );
      this.$emit("getCurrentPage", this.currentPage, this.pageSize);
    },
    //
    handleSizeChange(val) {
      this.pageSize = val;
      // this.currentPage = 1;
      // this.tableData = this.newEmployee.slice(0, val);
      this.$emit("getPageSize", this.currentPage, this.pageSize);
    },
  },
};
</script>

<style scoped lang="less">
.page {
  position: relative;
  height: 90px;
  .el-pagination {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
